<template>
	<view>
		<!-- 维修----start -->
		<view class="list-type" v-if="listType==1">
			<view class="detail-title">
				<view class="left-title">履历类型</view>
				<view class="right-title">{{repairInfo.repairType==1?'维修-内部维修':repairInfo.repairType==2?'维修-委外维修':''}}
				</view>
			</view>
			<view class="detail-title2">
				报修信息
			</view>
			<view class="gz-desc">
				<view class="title">故障描述</view>
				<view class="desc-reason">{{repairInfo.description}}</view>
			</view>
			<view class="gz-icon" v-if="repairInfo.repairType!=2">
				<view class="title">故障照片</view>
				<view class="icon-list">
					<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,imgList)"
						v-for="v in imgList" :src="v"></image>
					<video style="width: 210rpx;height: 210rpx;margin: 6rpx;" v-for="v in videoList" :src="v"></video>
					<!-- <u-album :urls="getpictureList(repairInfo.failurePictures)" keyName="src2" multipleSize="105" maxCount="9"></u-album> -->
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">报修人</view>
				<view class="right-title">{{repairInfo.createUserName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">报修时间</view>
				<view class="right-title">{{repairInfo.createTime}}</view>
			</view>
			<view class="detail-title2">
				故障信息
			</view>
			<view class="detail-title detail-title-border" v-for="(item,index) in gzInfo" :key="index">
				<view class="left-title">{{item.label}}</view>
				<view class="right-title">{{item.value}}</view>
			</view>
			<view class="detail-title2">
				维修信息
			</view>
			<view class="detail-title detail-title-border" v-for="(item,index) in wxInfo" :key="index">
				<view class="left-title">{{item.label}}</view>
				<view class="right-title">{{item.value}}</view>
			</view>


			<view class="gz-icon">
				<view class="title">维修照片</view>
				<view class="icon-list">
					<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,repairImgList)"
						v-for="v in repairImgList" :src="v"></image>
					<video style="width: 210rpx;height: 210rpx;margin: 6rpx;" v-for="v in repairVideoList"
						:src="v"></video>
				</view>
			</view>
			<view class="list-title2" v-if="repairInfo.partList&&repairInfo.partList.length>0">
				<view class="left">
					维修备件列表
				</view>
			</view>
			<view class="list-wrapper2" v-if="repairInfo.partList.length > 0">
				<!-- <view class="list-item" style="background: #f2f2f2;" 
					:key="index">
					<view class="left-icon">
						<image :src="item.partPicture"></image>
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/beijian.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">{{item.partName}}</view>
						<view class="txt3">
							<view style="width:200rpx;">{{item.partTypeName}}</view>
							<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：{{item.totalAmount}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="list-item" v-for="(item,index) in repairInfo.partList" :key="index">
					<view class="left-icon">
						<!-- <image :src="c.partPicture"></image> -->
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/beijian.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">{{item.partName}}
						</view>
						<view class="txt3">
							<view>{{item.partTypeName}}</view>
							<view style="color: #4D4D4D;">使用数量：{{item.totalAmount}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="repairInfo.repairType==2">
				<view class="detail-title white-bg detail-title-border">
					<view class="left-title">维修厂家</view>
					<view class="right-title">{{repairInfo.repairFactory}}</view>
				</view>
				<view class="detail-title white-bg detail-title-border">
					<view class="left-title">外部维修费用</view>
					<view class="right-title">{{repairInfo.outsourceFee?repairInfo.outsourceFee:0}}元</view>
				</view>
				<view class="detail-title white-bg detail-title-border">
					<view class="left-title">内部维修费用</view>
					<view class="right-title">{{repairInfo.repairFee?repairInfo.repairFee:0}}元</view>
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">维修总费用</view>
				<view class="right-title">
					{{getTotalPrice(repairInfo.repairFee,repairInfo.outsourceFee)}}
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">维修人</view>
				<view class="right-title">{{repairInfo.repairUserName}}</view>
			</view>
			<!-- <view class="detail-title-colum">
				<view class="left-title">维修时间</view>
				<view class="right-title">{{repairInfo.startTime}}至{{repairInfo.endTime}}</view>
			</view> -->
			<view class="detail-title detail-title-border">
				<view class="left-title">维修时间</view>
				<view class="right-title" style="text-align: end;">
					<view class="">
						{{repairInfo.startTime}}
					</view>
					<view class="">
						至{{repairInfo.endTime}}
					</view>
				</view>
			</view>
			<view class="" v-if="fileList2.length>0 && repairInfo.repairType==2">
				<view class="detail-title3" v-if="fileList2.length>0">
					附件
				</view>
				<view class="bx-upload detail-title-border">
					<view v-for="(item,index) in fileList2" :key="index">
						<view class="tab-list">
							<view class="tab-left">
								<image src="../../../static/images/beijian/wenjian.png"></image>
							</view>
							<view class="tab-right">
								<view class="data-txt">
									<view class="txt1">{{item.label}}</view>
									<view class="txt2">{{item.size}}kb</view>
								</view>
								<view style="color: #0F53AC;font-size: 28rpx;" @click="getNewFileUrl(item.url,item.label)">
									查看
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-title2">
				验证信息
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">验证结果</view>
				<view class="right-title">
					{{repairInfo.verifyStatus===0?'待验证':repairInfo.verifyStatus==1?'通过':repairInfo.verifyStatus==2?'不通过':''}}
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">验证人</view>
				<view class="right-title">{{repairInfo.verifyUserName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">验证时间</view>
				<view class="right-title">{{repairInfo.verifyTime}}</view>
			</view>
		</view>
		<!-- 维修----end -->
		<!-- 维保----start-->
		<view class="list-type" v-if="listType==2">
			<view class="detail-title">
				<view class="left-title">履历类型</view>
				<view class="right-title">维保</view>
			</view>
			<view class="list-type">
				<view class="detail-title2">
					维保基本信息
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">设备名称</view>
					<view class="right-title">{{listInfo.deviceName}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">编号</view>
					<view class="right-title">{{listInfo.deviceNum}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保工单号</view>
					<view class="right-title">{{listInfo.taskOrderNum}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保类型</view>
					<view class="right-title">{{listInfo.maintainTypeName}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保周期</view>
					<view class="right-title">{{listInfo.period}}{{listInfo.periodUnit}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保人</view>
					<view class="right-title">{{listInfo.maintainUserName}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">计划开始时间</view>
					<view class="right-title">{{listInfo.planDate}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保开始时间</view>
					<view class="right-title">{{listInfo.factBeginDate}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">维保完成时间</view>
					<view class="right-title">{{listInfo.factEndDate}}</view>
				</view>

				<view class="detail-title4">
					<view>维保内容</view>
					<view class="txt-right">正常 <view>{{listInfo.normalNum||0}}</view> 个，异常 <view>
							{{listInfo.anomalyNum||0}}
						</view> 个</view>
				</view>
				<view class="weibao">
					<view class="weibao-item" v-for="(s,index) in listInfo.maintainItemRequests" :key="index">
						<view class="item-top">
							<view class="left">{{index+1}}.{{s.itemName}}</view>
							<view class="right" :class="[s.maintainResult==1?'right':s.maintainResult==2?'right2':'']">
								{{s.maintainResult==1?'正常':s.maintainResult==2?'异常':''}}
							</view>
						</view>
						<view class="item-bottom">
							{{s.content}}
						</view>
						<view class="gd-information" v-if="s.maintainResult==2">
							<view class="gd-number">
								<view>关联维修工单</view>
								<view class="gd-hao">{{s.repairOrderNum}}
									<view class="copy" v-if="s.repairOrderNum" @click="copyOrderNum(s.repairOrderNum)">
										复制
									</view>
								</view>
							</view>
							<view class="cltype-wrapper" style="display: flex;">
								<view class="cl-type">
									<view class="cl-people">异常处理方式</view>
									<view class="cl-people cl-type2">{{s.dealWay==1?'维保处理':s.dealWay==2?'维保报修处理':''}}
									</view>
								</view>
								<view class="cl-type">
									<view class="cl-people">处理人</view>
									<view class="cl-people cl-type2">{{s.dealUserName}}</view>
								</view>
							</view>

							<view class="gd-title">异常描述</view>
							<view class="gd-desc">{{s.description}}</view>
							<view class="gd-title">异常照片</view>
							<view class="icon-list">
								<image style="width: 200rpx;height: 200rpx;margin: 4rpx;"
									v-for="(v,index) in getpictureList(s.pictures)" @tap="previewImage(v,s)" :src="v">
								</image>
								<video style="width: 200rpx;height: 200rpx;margin: 4rpx;"
									v-for="v in handleVideoList(s.pictures)" :src="v"></video>
							</view>
							<view v-if="s.dealWay==2" class="gd-btn" @click="getCodeDetail(s.repairOrderNum)">
								<view class="btn">
									查看工单详情
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="gz-icon">
					<view class="title">维保照片</view>
					<view class="icon-list">
						<image @tap="previewImage(v,imgList1)" v-for="v in imgList1" :src="v"></image>
						<video v-for="v in videoList1" :src="v"></video>
					</view>
				</view>

				<view class="list-title2" v-if="listInfo.partList&&listInfo.partList.length>0">
					<view class="left">关联备件列表</view>
				</view>
				<view class="list-title3" v-if="listInfo.partList&&listInfo.partList.length>0">
					<view class="right">备件总费用： {{totalPrice}}元 <view class="bj-total">备件总数量： {{totalNum}}件</view>
					</view>
				</view>
				<view class="list-wrapper2" v-if="listInfo.partList&&listInfo.partList.length>0">
					<view class="list-item" v-for="(c,index) in listInfo.partList" :key="index">
						<view class="left-icon">
							<!-- <image :src="c.partPicture"></image> -->
							<image :src="c.partPicture?c.partPicture:'../../../static/images/index/weibaorenwu.png'">
							</image>
						</view>
						<view class="right-txt">
							<view class="txt1">{{c.partNum}}{{c.partName}}
							</view>
							<view class="txt3">
								<view>{{c.partTypeName}}</view>
								<view style="color: #4D4D4D;">使用数量：{{c.totalAmount}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 维保----end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalNum: 0, //备件列表总数量
				totalPrice: 0, //备件列表总价格
				listType: 2, //1-维修  2-维保
				orderNum: '',
				weibaoId: '',
				urls1: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				list: [{
						title: "先导活塞式蒸汽减压阀先导活塞式蒸汽减压阀先导活塞式蒸汽减压...",
						txt1: "设备类型显示",
						num: "3",
						price: "3000元"
					},
					{
						title: "先导活塞式蒸汽减压阀先导活塞式蒸汽减压阀先导活塞式蒸汽减压...",
						txt1: "设备类型显示",
						num: "36",
						price: "5000元"
					}
				],
				gzInfo: [{
					label: "故障等级",
					value: "1"
				}, {
					label: "故障类型",
					value: "发动故障"
				}, {
					label: "故障现象",
					value: "漏机油"
				}, {
					label: "解决方案",
					value: "更换机油"
				}, ],
				wxInfo: [{
					label: "故障等级",
					value: "1"
				}, {
					label: "维修类型",
					value: "委外故障报修"
				}, {
					label: "维修内容",
					value: "更换机油"
				}],
				wbList: [{
						label: "设备名称",
						value: "真圆度・圆测量机"
					},
					{
						label: "编号",
						value: "DEV2020000154"
					},
					{
						label: "维保工单号",
						value: "GDH102456651"
					}, {
						label: "维保类型",
						value: "维保类型一"
					}, {
						label: "维保周期",
						value: "2天"
					}, {
						label: "维保人",
						value: "孙熙"
					}, {
						label: "计划开始时间",
						value: "2023/2/7"
					}, {
						label: "计划结束时间",
						value: "2022/7/8"
					}, {
						label: "维保完成时间",
						value: "2022/9/22"
					},
				],
				repairInfo: [], //维修
				aintenancemInfo: [], //维保
				wbInfo: {},
				imgList: [], //图片列表
				videoList: [], //视频列表
				repairImgList: [], //维修照片列表
				repairVideoList: [], //维修视频列表，
				closeImgList: [],
				closeVideoList: [],
				listInfo: {},
				imgList1: [], //图片列表
				videoList1: [],
				fileList2: [] //附件列表
			}
		},
		onLoad(options) {
			this.listType = options.careerType;
			this.orderNum = options.orderNum;
			this.weibaoId = options.id;
			if (this.listType == 1) {
				this.getweixiuList()
			}
			if (this.listType == 2) {
				this.getweibaoList()
			}
		},
		methods: {
			getTotalPrice(t1, t2) {
				let t = '0'
				if (t1 || t2) {
					t = t1 + t2
				} else {
					t = '0'
				}
				return t + '元'
			},
			copyOrderNum(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				});
			},
			handleVideoList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					var videoList = []
					for (let i = 0; i < splitAdd.length; i++) {
						let iOrV = splitAdd[i].split("?")[0].split(".")
						let iOrVL = splitAdd[i].split("?")[0].split(".").length - 1
						if (iOrV[iOrVL] == 'mp4') {
							videoList.push(splitAdd[i])
						}
					}
					console.log('videoList', videoList)
					return videoList
				} else {
					return []
				}
			},
			previewImage(e, s) {
				console.log(e, 'sssss')
				console.log(s, 'sssss')
				let imgList = []
				if (s.pictures) {
					imgList = this.getpictureList(s.pictures)
				} else {
					imgList = s
				}
				uni.previewImage({
					current: e,
					urls: imgList,
				});
			},
			handleFileList(data) {
				let failurePictures = data.failurePictures
				let repairPictures = data.repairPictures
				let closePictures = data.closePictures
				let maintainPictures = data.maintainPictures
				if (maintainPictures) {
					let fileList = maintainPictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList1.push(item)
						} else {
							this.imgList1.push(item)
						}
					})
				}
				if (failurePictures) {
					let fileList = failurePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})
				}
				if (repairPictures) {
					let fileList = repairPictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.repairVideoList.push(item)
							console.log('fileList1', this.videoList)
						} else {
							this.repairImgList.push(item)
						}
					})
				}
				if (closePictures) {
					let fileList = closePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.closeVideoList.push(item)
						} else {
							this.closeImgList.push(item)
						}
					})
				}

			},
			//获取工单详情
			getCodeDetail(repairOrderNum) {
				if (repairOrderNum) {
					uni.navigateTo({
						url: '/pages/subPackagesA/repairList/wxDetail?orderNum=' + repairOrderNum
					})
				} else {
					uni.$u.toast('暂无工单信息')
				}

			},
			//维修详情
			getweixiuList() {
				uni.$u.http.get(`/device/mobile/deviceRepair/repairDetailByOrderNum/${this.orderNum}`).then(res => {
					console.log('res===>11', res)
					if (res.code == 0) {
						this.repairInfo = res.data;
						this.wxInfo[0].value = res.data.failureLevel;
						if (res.data.repairType == 1) { //维修类型；1.内部维修  2.委外维修
							this.wxInfo[1].value = '内部维修';
						}
						if (res.data.repairType == 2) {
							this.wxInfo[1].value = '委外维修';
							this.handleAnnex(res.data.fileNames, res.data.fileUrls, res.data.fileSizes)
						}
						this.wxInfo[2].value = res.data.content;

						this.gzInfo[0].value = res.data.failureLevel;
						this.gzInfo[1].value = res.data.failureCategory;
						this.gzInfo[2].value = res.data.failurePhenomenon;
						this.gzInfo[3].value = res.data.solution;
						this.handleFileList(res.data)
					}
				}).catch(err => {})
			},
			//维保详情
			getweibaoList() {
				uni.$u.http.get(`/device/mobile/deviceMaintainTask/getInfo/${this.orderNum}`).then(res => {
					console.log('res===>22', res)
					if (res.code == 0) {
						this.wbInfo = res.data;
						this.listInfo = res.data
						this.handleFileList(res.data)
						res.data.partList.forEach(item => {
							this.totalNum = this.totalNum + item.totalAmount
							this.totalPrice = this.totalPrice + item.totalMoney
						})
					}
				}).catch(err => {})
			},
			//处理图片
			getpictureList(pictureinfo) {
				console.log(pictureinfo)
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					var imgList = []
					for (let i = 0; i < splitAdd.length; i++) {
						let iOrV = splitAdd[i].split("?")[0].split(".")
						let iOrVL = splitAdd[i].split("?")[0].split(".").length - 1
						if (iOrV[iOrVL] != 'mp4') {
							imgList.push(splitAdd[i])
						}
					}
					return imgList
				} else {
					return []
				}
			},
			//处理附件
			handleAnnex(name, url, size) {
				let nameArr = name.split(',')
				let urlArr = url.split(',')
				let sizeArr = size.split(',')
				console.log('sizeArr', sizeArr, urlArr)
				if (urlArr.length > 0 && urlArr[0] != "") {
					for (let i = 0; i < nameArr.length; i++) {
						let obj = {
							label: nameArr[i],
							url: urlArr[i],
							size: sizeArr[i]
						}
						this.fileList2.push(obj)
					}
				} else {
					this.fileList2 = []
				}
			},
			getNewFileUrl(fileUrl, fileName) {
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${fileUrl}&fileName=${fileName}`).then(res => {
					this.lookAnnex(res.data, fileName)
				})
			},
			
			
			lookAnnex(fileUrl, fileName) {
				console.log(fileUrl, 'fileUrl')
				let that = this
				uni.downloadFile({
					url: fileUrl, //下载地址，后端接口获取的链接
					// filePath: wx.env.USER_DATA_PATH + '/' + fileName,
					success: (data) => {
						console.log(data)
						if (data.statusCode === 200) {
							//预览
							var filePath = data.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.list-type {
		padding-bottom: 40rpx;
	}

	.detail-title {
		display: flex;
		justify-content: space-between;
		padding: 32rpx;

		.left-title {
			color: #666666;
			font-size: 17px;
			font-weight: 400;
		}

		.right-title {
			color: #2b2b2b;
			font-size: 16px;
			font-weight: 400;
		}
	}

	.detail-title-border {
		border-bottom: 1px solid #f2f2f2;
	}

	.detail-title-colum {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		padding: 32rpx;

		.left-title {
			color: #666666;
			font-size: 17px;
			font-weight: 400;
		}

		.right-title {
			color: #2b2b2b;
			font-size: 16px;
			font-weight: 400;
			// margin-top: 20rpx;
		}
	}

	.detail-title2 {
		padding: 20rpx 30rpx;
		background: #f2f2f2;
		font-size: 34rpx;
		color: #2b2b2b;
	}

	.detail-title3 {
		padding: 32rpx 32rpx 0 32rpx;
		background: #fff;
		font-size: 17px;
		color: #666666;
	}

	.detail-title4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 32rpx;
		background: #f5f5f5;
		font-size: 17px;
		font-weight: 400;
		color: #2b2b2b;

		.txt-right {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: 400;
			color: #8c8c8c;
		}
	}

	.weibao {

		// padding: 30rpx;
		.weibao-item {
			display: flex;
			flex-direction: column;
			padding: 32rpx;
			border-bottom: 1px solid #EDEDED;

			.item-top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				color: #2b2b2b;

				.left {
					width: 85%;
					font-size: 16px;
					font-weight: 400;
				}

				.right {
					color: #02AD82;
				}

				.right2 {
					color: #FF4D4D;
				}
			}

			.item-bottom {
				font-size: 16px;
				font-weight: 400;
				color: #4D4D4D;
				margin-top: 20rpx;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
	}

	.gz-desc {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 34rpx;
			color: #666666;
		}

		.desc-reason {
			font-size: 34rpx;
			color: #2b2b2b;
			margin-top: 20rpx;
		}
	}

	.gz-icon {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 34rpx;
			color: #8c8c8c;
		}

		.icon-list {
			// padding-top: 20rpx;
		}

	}

	.list-wrapper {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			margin: 10rpx 30rpx;
			padding: 20rpx 0;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					font-size: 34rpx;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
				}
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.gd-information {
		border-radius: 4px;
		background: #f2f2f2;
		margin-top: 20rpx;
		padding: 32rpx;

		.gd-number {
			font-size: 16px;
			color: #8c8c8c;

			.gd-hao {
				display: flex;
				font-size: 16px;
				font-weight: 400;
				color: #4D4D4D;
				margin-top: 10rpx;
			}
		}

		.cl-type {
			width: 300rpx;
			// font-size: 28rpx;
			color: #8C8C8C;
			display: flex;
			flex-direction: column;
			margin-top: 16rpx;

			.cl-people {
				text-align: left;
			}

			.cl-type2 {
				margin-top: 10rpx;
				color: #4D4D4D;
			}
		}

		.cl-type2 {
			color: #4D4D4D;
		}

		.gd-title {
			font-size: 16px;
			font-weight: 400;
			color: #8c8c8c;
			margin-top: 16rpx;
		}

		.gd-desc {
			font-size: 16px;
			font-weight: 400;
			color: #4D4D4D;
			margin-top: 10rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// -webkit-line-clamp: 2;
			// -webkit-box-orient: vertical;
		}

		.gd-btn {
			text-align: center;
			color: #0F53AC;
			margin-top: 32rpx;
			font-size: 17px;
			font-weight: 400;

			.btn {
				height: 30px;
				line-height: 30px;
			}
		}

		.icon-list {
			// padding-top: 20rpx;
		}

		.select-detail {
			font-size: 34rpx;
			color: #0F53AC;
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.list-title2 {
		background: #f2f2f2;
		padding: 28rpx 32rpx;

		.left {
			font-size: 17px;
			font-weight: 400;
			color: #2B2B2B;
		}

		.right {
			font-size: 24rpx;
			color: #8c8c8c;
			display: flex;
			margin-top: 20rpx;

			.bj-total {
				margin-left: 100rpx;
			}
		}
	}

	.list-title3 {
		background: #ffffff;
		padding: 32rpx;
		border-bottom: 2rpx solid #f2f2f2;

		.right {
			font-size: 16px;
			font-weight: 400;
			color: #8C8C8C;
			display: flex;
			align-items: center;

			.bj-total {
				margin-left: 100rpx;
			}
		}
	}

	.list-wrapper2 {
		// padding-bottom: 30rpx;

		.list-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				padding-left: 32rpx;
				height: 152rpx;

				.txt1 {
					font-size: 16px;
					font-weight: 400;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					font-size: 14px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #A6A6A6;
					font-size: 28rpx;
					width: 500rpx;
				}
			}
		}

	}
	
	.bx-upload {
		padding: 0 30rpx 20rpx 30rpx;
		background: #fff;
	
		.tab-list {
			display: flex;
			padding: 30rpx 0 30rpx 30rpx;
			border-radius: 8rpx;
			background: #f2f2f2;
			margin-top: 20rpx;
	
			.tab-left {
				border-radius: 8rpx;
				display: flex;
				align-items: center;
	
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}
			}
	
			.tab-right {
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;
	
				.data-txt {
					max-width: 460rpx;
	
					.txt1 {
						max-width: 460rpx;
						font-size: 28rpx;
						overflow: hidden;
						// text-overflow: ellipsis;
						white-break: break-all;
						color: #2B2B2B;
					}
	
					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
						margin-top: 10rpx;
					}
				}
			}
	
		}
	}
</style>